<template>
  <div class="active">
     <el-form :model="formdata">
      <el-form-item>
        <el-input v-model="formdata.test" placeholder='输入菜单名称'></el-input>
      </el-form-item>
      <el-button class="chande" @click="search">搜索</el-button>
      <el-button @click="replacement">重置</el-button>
        <el-button
          class="el-icon-plus"
          @click="eminct"
          >新增菜单</el-button
        >
    </el-form>
    <el-table
      :data="listinfo"
      style="width: 100%;margin-bottom: 20px;"
      row-key="name"
      default-expand-all
      :tree-props="{hasChildren:'name'}"
       :default-sort = "{prop: 'order', order: 'ascending'}">
     <el-table-column
        prop="order"
        label="排序"
        style="width: 80%">
    </el-table-column>
      <el-table-column
        prop="name"
        label="菜单名称"
        style="width: 80%">
    </el-table-column>
    <el-table-column
        prop="routerPath"
        label="菜单路径"
        style="width: 80%">
    </el-table-column>
    <el-table-column
        prop="name"
        label="菜单级别"
        style="width: 80%">
        <div v-if="q.topLevel == false">二级</div>
        <div v-else>一级</div>
    </el-table-column>
      <el-table-column
        label="设置"
        style="width: 80%">
         <template v-slot="{row}">
          <el-button v-if="q.topLevel == false" type="text" size="small" @click="subor(row)">查看上级</el-button>

          <el-button v-else type="text" size="small" @click="subordinate(row)">查看下级</el-button>
    </template>
    </el-table-column>
   
    <el-table-column
        label="是否启用"
        style="width: 80%">
        <template v-slot="{row}">
        <el-switch
  v-model="row.status"
  active-color="#ff7144"
  @change="commissioning(row)">
</el-switch>
        </template>
    </el-table-column>
     <el-table-column
        label="操作"
        style="width: 80%">
        <template v-slot="{row}">
          <el-button type="text" size="small" @click="compile(row)">编辑</el-button>
          <el-button type="text" size="small" @click="remove(row)">删除</el-button>
        </template>
    </el-table-column>
           </el-table>
      <!-- 分页
     <el-pagination
        class="lyx"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="q.index"
        :page-size="5"
        layout="prev, pager, next, jumper"
      >
      </el-pagination> -->
      <!-- 添加菜单 -->
       <el-dialog :title="isedit ? '编辑店铺': '添加店铺'"
       :destroy-on-close="true" 
       :close-on-click-modal='false'
       :visible.sync="outerVisible" 
       v-if="outerVisible">
       <keep-alive>
    <Management class="aiopedg" @close='outer' :isedit="isedit" :childata='childata'></Management>
    </keep-alive>
</el-dialog>
  </div>
</template>

<script>
import { authority,omitremove,newclose,newopened,second } from '@/api/limits'
import Management from './components/management.vue'
export default {
  components: { Management },
 data () {
  return {
    isedit:false,
    outerVisible:false,
    listinfo:[],
    childata:{},
    info:[],
    q:{
      index:1,
      size:100,
      topLevel:'true',
      menuTitle:''
    },
    formdata:{
      test:''
    }
  }
 },
 created(){
  this.loachedn()
 },
 methods:{
 async loachedn(){
       const res = await authority(this.q)
       console.log(res);
       this.listinfo = res.data.data
  },
  // 查看下级
async subordinate(row){
  this.q.topLevel = false
     const para = new URLSearchParams();
        para.append("menuId",row.id); //
   const rec = await second(para)
   this.listinfo = rec.data
  },
  subor(){
  this.q.topLevel = true
   this.loachedn()
  },
  // 开启关闭
 async commissioning(row){
    if(row.status == false){
          const params = new URLSearchParams();
        params.append("menuId",row.id); //
        const red = await newclose(params);
       this.$message.success(red.msg);
        // this.loachedn()
        } else{
        const param = new URLSearchParams();
        param.append("menuId",row.id); //
        const rev = await newopened(param);
        this.$message.success(rev.msg)
        // this.loachedn()
        }
  },
  // 新增菜单
  eminct(){
    this.outerVisible = true
    this.isedit = false
  },
  // 编辑菜单
  compile(row){
    this.outerVisible = true
    this.isedit = true
    this.childata = row
  },
  // 删除
  remove(row){
  this.$confirm("您确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
          const params = new URLSearchParams(); // 创建URLSearchParams数据对象
          params.append("menuId", row.id); //
          const res = await omitremove(params);
          this.loachedn()
          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success(res.msg);
        })
  },

  // 关闭组件
  outer(){
    this.outerVisible = false
    this.loachedn()
  },
     // 搜索
    search(){
      this.q.menuTitle = this.formdata.test
      this.loachedn()
    },
    // 重置
      replacement(){
        this.q.index = 1
        this.q.menuTitle = ''
        this.formdata.test = ''
        this.loachedn()
      },
      // 分页
    handleCurrentChange(index) {
      this.q.index = index;
      this.loachedn();
    },
    handleSizeChange(size) {
      this.q.size = size;
      this.loachedn();
    },
 }
}
</script>

<style scoped>
.active{
  background-color: #fff;
  padding: 20px;
}
 .el-form-item{
  width: 15% !important;
  display: inline-block;
margin-right: 20px;

}

.chande{
  display: inline-block;
  background-color: #ff8863;
  color: #fff;
  border: 1px solid #ff8863;
}
.el-icon-plus {
  color: #ff7144;
  position: absolute;
  right: 5%;
  border: 1px solid #ff7144;
}
.el-icon-plus:hover {
  background-color: #fff;
}
::v-deep .el-dialog {
  width: 500px !important;
}
</style>